<script setup lang='ts'>
import { ref } from 'vue';
import {
    addlot,
    editIsReach,
    prohibit,
    recodlit,
    recomlit,
    studentClass,
    talit,
    teacher
} from '@/views/consult/consApi';

const input = ref('');
const input1 = ref('');
const value = ref('');
const value2 = ref('');
const defaultTime2: [Date, Date] = [
    new Date(2000, 1, 1),
    new Date(2000, 2, 1)
];
const options1 = [
    {
        value: '未到',
        label: '未到'
    },
    {
        value: '已到',
        label: '已到'
    }

];
const face = ref('');
//咨询师下拉框
const options2 = ref([]);
teacher(face.value).then(res => {
    if (res.code === 200) {
        options2.value = res.rows;
    }
});
//班级下拉框
const options = ref([]);
const cas = ref('');
const tcas = ref('');
studentClass(tcas.value).then(res => {
    if (res.code === 200) {
        options.value = res.rows;
    }
});
// tabe 表格
const tableData = ref([]);
let times = ref('');
let hours = ref('');

//  禁用弹框
const disable = ref(false);
const value3 = ref();
const value1 = ref('');
const options3 = [
    {
        value: '不禁用',
        label: '不禁用'
    },
    {
        value: '一周',
        label: '一周'
    },
    {
        value: '两周',
        label: '两周'
    },
    {
        value: '三周',
        label: '三周'
    },
    {
        value: '四周',
        label: '四周'
    }
];
let obj = ref({ studentId: 0, durationHour: 0 });

function disa(id: any) {
    obj.value.studentId = id.psyStudent.id;
    obj.value.durationHour = value3.value;
    disable.value = true;
}

function mine() {
    disable.value = false;
    switch (value3.value) {
        case '不禁用':
            obj.value.durationHour = 0;
            break;
        case '一周':
            obj.value.durationHour = 168;
            break;
        case '两周':
            obj.value.durationHour = 330;
            break;
        case '三周':
            obj.value.durationHour = 468;
            break;
        case '四周':
            obj.value.durationHour = 648;

    }

    prohibit(obj.value).then(res => {
        if (res.code === 200) {
            search();
        }
    });
}

const searchParmas = ref({
    pageNum: 1,
    pageSize: 10,
    name: '',
    stuName: '',
    stuNum: '',
    teacherName: '',
    statusType: '',
    psyClass: ''

});
const total = ref(0);

// 渲染表格
function search() {
    talit(searchParmas.value).then(res => {
        if (res.code === 200) {
            hours.value = res.data.totalDuration;
            tableData.value = res.rows;
            times.value = res.total;
            total.value = res.total;
        }
    });
}

search();

// 查看弹框
const seek = ref(false);
const id = ref('');
const tid = ref('');

function seak(id: any) {
    seek.value = true;
    id.value = id;
    tid.value = id.value;
}

// 建议弹框
const recom = ref(false);
const textarea = ref('');


let obt = ref(
    {
        id: '',
        teacherSuggest: '',
        studentId: ''
    }
);

function recm(id: any) {
    recom.value = true;
    obt.value.id = id.id;
    obt.value.studentId = id.id;
    obt.value.teacherSuggest = id.teacherSuggest;
}

function rec() {
    recom.value = false;
    recomlit(obt.value).then(res => {
        if (res.code === 200) {
            obt.value.teacherSuggest = '';
        }
    });
}

// 咨询记录
const reco = ref(false);
const zong = ref('');

function recod(val: any) {
    reco.value = true;
    recodlit({ studentId: val.psyStudent.id }).then(res => {
        zong.value = res.rows;
    });
}


// 赴约状态
const dangers = ref(false);
const btid = ref({
    arrive: '',
    id: ''
});

function appo(val: any) {
    dangers.value = true;
    btid.value.id = val.id;
    if (val.arrive === '0') {
        btid.value.arrive = '1';
    } else {
        btid.value.arrive = '0';
    }
}

function sup() {
    dangers.value = false;
    editIsReach(btid.value).then(res => {
        if (res.code === 200) {
            search();
        }
    });
}

// 搜索
function seaek() {
    searchParmas.value.statusType = value.value;
    searchParmas.value.psyClass = cas.value;
    searchParmas.value.teacherName = value1.value;
    searchParmas.value.stuName = input.value;
    searchParmas.value.stuNum = input1.value;
    searchParmas.value.pageNum = 1;
    search();
}

// 重置
function reset() {
    value.value = '';
    cas.value = '';
    value1.value = '';
    input.value = '';
    input1.value = '';
    searchParmas.value.statusType = value.value;
    searchParmas.value.psyClass = cas.value;
    searchParmas.value.teacherName = value1.value;
    searchParmas.value.stuName = input.value;
    searchParmas.value.stuNum = input1.value;
    searchParmas.value.pageNum = 1;
    search();
}


// 录档
const files = ref(false);

const recording = ref({
    id:'',
    type:'',
    source:'',
    level:'',
    emotion:'',
    health:'',
    statement:'',
    process:'',
    impression:'',
    target:'',
    result:''

});

function file(data:any) {
    recording.value.id =data.id;
    recording.value.type=data.type;
    recording.value.source=data.source;
    recording.value.level=data.level;
    recording.value.emotion=data.emotion;
    recording.value.health=data.health;
    recording.value.statement=data.statement;
    recording.value.process=data.process;
    recording.value.impression=data.impression;
    recording.value.target=data.target;
    recording.value.result=data.result;
    files.value = true;

}
// 提交录档
function ferre() {
    files.value = false;
    addlot(recording.value).then(res=>{
        if (res.code ===200){
        }
    })
}


</script>
<template>
    <div class='box'>
        <span> 学生姓名</span>
        <el-input v-model='input' style='width: 240px' placeholder='请输入学生名字' clearable />
        <span> 班级</span>
        <el-select
            v-model='cas'
            placeholder='请选择班级'
            size='large'
            style='width: 192px;'
        >
            <el-option
                v-for='item in options'
                :key='item.value'
                :label='item.name'
                :value='item.name' />
        </el-select>
        <span>学号</span>
        <el-input v-model='input1' style='width: 240px' placeholder='请输入学号' clearable />
        <span>咨询时间</span>
        <el-date-picker
            v-model='value2'
            type='datetimerange'
            start-placeholder='Start Date'
            end-placeholder='End Date'
            :default-time='defaultTime2'
        />
        <span>赴约状态</span>
        <el-select
            v-model='value'
            placeholder='全部'
            size='large'
            style='width: 192px;'
        >
            <el-option
                v-for='item in options1'
                :key='item.value'
                :label='item.label'
                :value='item.value' />
        </el-select>

    </div>
    <!--    搜索-->
    <div class='search'>
        <span>咨询师</span>
        <el-select
            v-model='value1'
            placeholder='全部'
            size='large'
            style='width: 192px;'
        >
            <el-option
                v-for='item in options2'
                :key='item.name'
                :label='item.name'
                :value='item.name' />
        </el-select>
        <el-button  type='primary' @click='seaek'  v-hasPermi="['consult:query']">
            <el-icon>
                <Search />
            </el-icon>
            搜索
        </el-button>
        <el-button type='primary' plain style='margin-left: 10px' @click='reset'>
            <el-icon>
                <Refresh />
            </el-icon>
            重置
        </el-button>
    </div>
    <!--    统计-->
    <div class='statistics'>
        <span>统计：</span>
        <span style='margin-left: 10px'>咨询时长：</span>
        <span>{{ hours }}</span>
        <span style='margin-left: 10px'>咨询次数 :</span>
        <span>{{ times }}</span>
    </div>
    <!--    表格-->
    <div class='tabox'>
        <el-table :data='tableData' border style='width: 100%'>
            <el-table-column align='center' type='index' fixed prop='index' label='序号' />
            <el-table-column align='center' prop='psyStudent.name' label='学生名字' />
            <el-table-column align='center' prop='psyClass.name' label='班级' />
            <el-table-column align='center' prop='psyStudent.stuNum' label='学号' />
            <el-table-column align='center' prop='psyStudent.phoneNumber' label='手机号' />
            <el-table-column align='center' prop='psyTeacher.name' label='咨询师' />
            <el-table-column show-overflow-tooltip align='center' prop='content' label='问题描述' width='131' />
            <el-table-column align='center' prop='createTime' label='咨询时间' />
            <el-table-column align='center' prop='mode' label='咨询方式' />
            <!--            <el-table-column align='center' prop='city' label='咨询类型' />-->
            <el-table-column align='center' prop='duration' label='咨询时长' />
            <el-table-column align='center' prop='psyStudent.remainingForbiddenHour' label='禁用剩余时长' />
            <el-table-column align='center' prop='address' label='赴约状态'>
                <template v-slot='scope'>
                    <el-button type='danger' :class="scope.row.arrive==='0'?'blue':'red'" @click='appo(scope.row)'>
                        {{ scope.row.arrive === '0' ? '未到' : '已到' }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column align='center' prop='tran' label='咨询状态'>
                <template v-slot='scope'>
                    {{ scope.row.staus === '0' ? '待开始' : '已结束' }}
                </template>
            </el-table-column>
            <el-table-column align='center' fixed='right' label='操作' width='220'>
                <template v-slot='scope'>
                    <el-button link type='primary' size='small' @click='recm(scope.row)'>建议</el-button>
                    <el-button  v-hasPermi="['consult:look']" link type='primary' size='small' @click='seak(scope.row)'>查看</el-button>
                    <el-button  v-hasPermi="['consult:disabled']"  link type='primary' size='small' @click='disa(scope.row)'>禁用</el-button>
                    <el-button link type='primary' size='small' @click='recod(scope.row)'>记录</el-button>
                    <el-button v-hasPermi="['consult:record']" link type='primary' size='small' @click='file(scope.row)'>录档</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--                    建议弹框-->
        <el-dialog
            v-model='recom'
            title='建议信息'
            width='800'
        >
            <el-input
                v-model='obt.teacherSuggest'
                maxlength='500'
                style='width: 740px'
                placeholder='请填写日常反馈信息'
                show-word-limit
                type='textarea'
                resize='=none'
                :rows='15'
            />
            <template #footer>
                <div class='dialog-footer' style='text-align: center'>
                    <el-button @click='recom = false'>取消</el-button>
                    <el-button type='primary' @click='rec'>
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--        // 查看弹框-->
        <el-dialog
            v-model='seek'
            title='查看信息'
            width='688'
        >
            <!--            查看中的表格-->
            <div class='tabox2'>
                <table>
                    <tbody>
                    <tr>
                        <th>姓名</th>
                        <td>{{ tid.psyStudent.name }}</td>
                        <th>班级</th>
                        <td>{{ tid.psyClass ? tid.psyClass.name : '' }}</td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>学号</th>
                        <td>{{ tid.psyStudent.stuNum }}</td>
                        <th>咨询老师</th>
                        <td>{{ tid.psyTeacher ? tid.psyTeacher.name : '' }}</td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>咨询方式</th>
                        <td>{{ tid.mode }}</td>
                        <th>赴约状态</th>
                        <td>未到</td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>咨询时间</th>
                        <td colspan='3'>
                            <p>{{ tid.createTime }}</p>
                        </td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>问题描述</th>
                        <td colspan='3'>
                            <p>{{ tid.content }}</p>
                        </td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>学生反馈</th>
                        <td colspan='3'>
                            <p></p>
                        </td>
                    </tr>
                    </tbody>

                </table>
            </div>
        </el-dialog>

        <!--        禁用-->
        <div class='disble'>
            <el-dialog
                v-model='disable'
                title='设置禁用时间'
                width='300'
            >
                <el-select
                    v-model='value3'
                    placeholder=''
                    size='large'
                    style='width: 240px ;'
                    center
                >
                    <el-option
                        v-for='item in options3'
                        :key='item.value'
                        :label='item.label'
                        :value='item.value'
                    />
                </el-select>
                <template #footer>
                    <div class='dialog-footer' style='text-align: center'>
                        <el-button @click='disable = false'>取消</el-button>
                        <el-button type='primary' @click='mine'>
                            确定
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>

        <!--        咨询记录-->
        <el-dialog
            v-model='reco'
            title='咨询记录'
            width='700'
        >
            <div class='recobox' v-for='item in zong' :key='item.rows'>
                <span style='margin-left: 10px'>心理咨询老师：</span>
                <span></span>
                <span style='margin-left: 40px'>咨询方式：</span>
                <span>{{ item.mode }}</span>
                <span style='margin-left: 200px'>{{ item.time }}</span>
                <div style='width: 640px;margin-top: 20px;margin-left: 15px'>
                    <span>问题描述：</span>
                    <span>{{ item.mode }}</span>
                </div>
            </div>
        </el-dialog>

        <!--        录档-->
        <el-dialog
            v-model='files'
            title='录档'
            width='700'
        >
            <span>基本信息</span>
            <div class='firebox'>
                <table>
                    <tbody>
                    <tr>
                        <th>既往病史</th>
                        <td style='width: 80px'></td>
                        <th>心理诊断经历</th>
                        <td style='width: 158px'></td>
                        <th>服药情况</th>
                        <td style='width: 89px'></td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>家庭情况</th>
                        <td></td>
                        <th>其他信息</th>
                        <td colspan='3'></td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>个案类型</th>
                        <td><input type='text' v-model='recording.type'></td>
                        <th>个案类源</th>
                        <td><input type='text' v-model=' recording.source'></td>
                        <th>处理级别</th>
                        <td><input type='text' v-model='recording.level'></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <span>咨询内容</span>
            <div class='onsulbox'>
                <table>
                    <tbody>
                    <tr>
                        <th>来访者情绪表现</th>
                        <td><input type='text' v-model='recording.emotion'></td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>来访者身体健康状况、仪表、神态、体态</th>
                        <td><input type='text' v-model='recording.health'></td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>来访者自述（包括近期状况、人际关系、成长中的相关重要事件）</th>
                        <td><input type='text' v-model='recording.statement'></td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>咨询过程、方法和策略（重要部分可以粘贴省略）</th>
                        <td><input type='text' v-model=' recording.process'></td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>咨询印象（问题类型、程度、原因）</th>
                        <td><input type='text' v-model='recording.impression'></td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>咨询目标（近期、远期）</th>
                        <td><input type='text' v-model='recording.target'></td>
                    </tr>
                    </tbody>
                    <tbody>
                    <tr>
                        <th>咨询评估与反馈</th>
                        <td><input type='text' v-model='recording.result'></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='files = false'>取消</el-button>
                    <el-button type='primary' @click='ferre'>
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!--        赴约状态-->
        <el-dialog
            v-model='dangers'
            title='提示'
            width='500'

        >
            <span>确定修改状态为已到</span>
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='dangers = false'>取消</el-button>
                    <el-button type='primary' @click='sup'>
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--        分页-->
        <div style='float: right;margin-top: 10px'>
            <el-pagination
                v-model:current-page='searchParmas.pageNum'
                v-model:page-size='searchParmas.pageSize'
                background
                layout='prev, pager, next'
                :total=total
                @currentChange='search'
            />
        </div>
    </div>
</template>
<style scoped lang='scss'>
.box {
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;

    span {
        font-weight: 600;
        font-size: 14px;
        margin-left: 15px;
        margin-right: 10px;
    }

    :deep(.el-select .el-input__wrapper) {
        height: 32px;
    }
    :deep(.el-range-editor.el-input__wrapper){
        width: 15%;
    }
}

.search {
    margin-left: 10px;
    margin-top: 20px;

    span {
        font-weight: 600;
        font-size: 14px;
        margin-left: 15px;
        margin-right: 25px;
    }

    :deep(.el-select .el-input__wrapper) {
        height: 32px;
    }

    :deep(.el-button) {
        margin-left: 180px;
    }
}

.statistics {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 14px;
}

.tabox {
    margin-left: 10px;
    margin-right: 15px;

    :deep(.el-dialog__header) {
        background-color: #1892FF;
        margin: 0;
        color: #FFFFFF;

        span, i {
            color: #FFFFFF;
        }
    }

    :deep(.el-dialog__title) {
    }

    .disble {
        :deep(.el-dialog__header) {
            background-color: white;

            span, i {
                color: black;
            }
        }
    }
}

.tabox2 {
    table {
        margin-left: 10px;
        border: 1px solid #EFEFEF;
        width: 632px;
    }

    th, td {
        border: 1px solid #EFEFEF;
        text-align: left;
        padding: 8px;
    }

    th {
        border: 1px solid #EFEFEF;
        background-color: #f2f2f2;
    }

    tr:nth-child(even) {
        border: 1px solid #EFEFEF;
        background-color: #f2f2f2;
    }
}

// 记录盒子
.recobox {
    border: 1px solid black;
    width: 670px;
    height: 121px;
}

//录档盒子
.firebox {
    margin-top: 10px;
    margin-left: 10px;

    table {
        width: 632px;
        border: 1px solid #EFEFEF;

        input {
            width: 100%;
            outline: 0;
        }
    }

    th, td {
        border: 1px solid #EFEFEF;
        text-align: left;
        padding: 8px;
    }

    th {
        border: 1px solid #EFEFEF;
        background-color: #f2f2f2;
    }

    tr:nth-child(even) {
        border: 1px solid #EFEFEF;
        background-color: #f2f2f2;
    }
}

//咨询内容表格
.onsulbox {
    table {
        margin-left: 10px;
        border: 1px solid black;
        width: 632px;

        input {
            width: 100%;

            outline: 0;
        }
    }

    th, td {
        border: 1px solid black;
        text-align: left;
        padding: 8px;
    }

    th {
        width: 150px;
    }
}

.blue {
    background-color: red;
}

.red {
    background-color: #1890FF;
}

</style>
